import { useEffect } from 'react';
import {
  Form,
  Input,
  InputNumber,
  Select,
  Button,
  Space,
  message,
  Row,
  Col,
} from 'antd';
import {
  SaveOutlined,
  CloseOutlined,
} from '@ant-design/icons';
import useOrdersStore from '../../store/orders/useOrdersStore';

const { Option } = Select;

const orderStatuses = [
  { value: 'completed', label: '已完成', color: 'success' },
  { value: 'pending', label: '待支付', color: 'warning' },
  { value: 'cancelled', label: '已取消', color: 'error' }
];

const OrderForm = ({ order, onSuccess, onCancel }) => {
  const [form] = Form.useForm();
  const { updateOrder } = useOrdersStore();

  useEffect(() => {
    if (order) {
      form.setFieldsValue({
        orderNumber: order.orderNumber,
        memberId: order.memberId,
        memberName: order.memberName,
        memberPhone: order.memberPhone,
        tableNumber: order.tableNumber,
        amount: order.amount,
        status: order.status,
      });
    }
  }, [order, form]);

  const handleSubmit = async (values) => {
    try {
      await updateOrder(order.id, values);
      message.success('订单更新成功');
      onSuccess?.();
    } catch {
      message.error('更新失败');
    }
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={handleSubmit}
      autoComplete="off"
    >
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            label="订单号"
            name="orderNumber"
          >
            <Input disabled />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="会员号"
            name="memberId"
          >
            <Input disabled />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={8}>
          <Form.Item
            label="会员姓名"
            name="memberName"
          >
            <Input disabled />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label="会员手机号"
            name="memberPhone"
          >
            <Input disabled />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label="桌号"
            name="tableNumber"
            rules={[{ required: true, message: '请输入桌号' }]}
          >
            <Input placeholder="请输入桌号" />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            label="订单金额"
            name="amount"
            rules={[{ required: true, message: '请输入订单金额' }]}
          >
            <InputNumber
              min={0}
              precision={2}
              style={{ width: '100%' }}
              placeholder="请输入订单金额"
            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="订单状态"
            name="status"
            rules={[{ required: true, message: '请选择订单状态' }]}
          >
            <Select placeholder="请选择订单状态">
              {orderStatuses.map(status => (
                <Option key={status.value} value={status.value}>
                  {status.label}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
      </Row>

      <Form.Item>
        <Space>
          <Button
            type="primary"
            htmlType="submit"
            icon={<SaveOutlined />}
          >
            保存修改
          </Button>
          <Button
            onClick={onCancel}
            icon={<CloseOutlined />}
          >
            取消
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default OrderForm;
